 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>品牌咖啡</title>
		<link rel="stylesheet" type="text/css" href="css/kafei.css"/>
		<script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lbu.js" type="text/javascript" charset="utf-8"></script>
		<!--<script>
			$(document).ready(function(){
			  $("#hide").click(function(){
			  
			    $("#hide").hide();
			  });
			  $("#show").click(function(){
			 
			    $("#hide").show();
			  });
			});
</script>-->
		
	</head>
	<body>

	<div class="hoedr">
			
			<ul class="box-ul">
				<li style="display: block;"><img src="img/bg_3.jpg"/></li>
				<li><img src="img/bg_2.jpg"/></li>
				<li><img src="img/bg_1.jpg"/></li>
				<li><img src="img/lki.jpg"/></li>
			</ul>
			<div id="box_left"> < </div>
			<div id="box_right"> > </div>
			
			<div class="box_ann">
				<span id="active"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			
		<nav>

			<div class="cont">
					<div class="brdf">
						<p>COFFEE</p>
						<span class="loi">BLEND</span>
					</div>
					<div class="nav_ul">
						<ul>
							<li><a href="">首页</a></li>
							<li><a href="">菜单</a></li>
							<li><a href="">服务</a></li>
							<li><a href="">博客</a></li>
							<li><a href="">简介</a></li>
							<li><a href="">商店</a>
								<ul class="xiala">
									<li><a href="">咖啡豆</a></li>
									<li><a href="">产品</a></li>
									<li><a href="">购物车</a></li>
								</ul>
							</li>
							<li><a href="">售后</a></li>
						</ul>
						
					</div>
					
					</div>
					<div class="denl">
						<!--是因为<a>的href属性，使用了#的缘故，你点击a的时候回到页面的开始，然后才在做click函数，
							你可以不使用href属性。但是这样的话，在IE6中a的一些伪属性:hover,:link,:active等不会起作用了,
							但是IE6+，ff,chrome不会有问题的。 
					也可以使用href="javascript:void(0);"-->
						<a  href="javascript:void(0);" onclick="Show()">登录</a>
					</div>
					
					<div id="shade" class="c1 hide"></div>
					<div id="modal" class="c2 hide">
						<div class="c3">COFFEE</div>
					<p><input type="text" placeholder="请输入用户名：" class="c4"/></p>
					<img src="img/用户.png" class="imglo"/>
					<img src="img/mima(1).png" class="imgli1"/>
					<p><input type="password" placeholder="密码:" class="c5"/></p>
					<p>
					<input class="cs4" type="button" value="登录">
					<a href="" class="csd"><img src="img/QQ.png"/></a>
					<a href="" class="csd1"><img src="img/新浪.png"/></a>
					<span class="cs5" onclick="Hide();">x</span>
				</p>
			</div>
					
			</div>
		</nav>	
			
			
		<div class="zhongt">
			<span class="subheading">欢迎光临</span>
			<h1 class="mb-4">The Best Coffee Testing  <br /> Experience</h1>
			<p class="asfe">A small river named Duden flows by their place and supplies it with the necessary<br /> regelialia.</p>
			<div class="gouwu">
				<div class="btn">
					<a href=""class="yanji_s">马上购买</a>
					<a href="">查看菜单</a>
				</div>
				
			</div>
		</div>	
		</div>
	<div class="feinh">
		<div class="feinh_1">
			<div class="liu1">
					<img src="img/电话.png"/>
					<div class="hua">
						<h3>000(123)456 7890</h3>
						<p>我心如一颗白砂糖，放入咖啡<br/>即可溶解。只是他再拼凑不劝</p>
					</div>	
			</div>	
			<div class="liu2">
					<img src="img/定位.png"/>
					<div class="hua">
						<h3 class="f3_2">198 West 21th Street</h3>
						<p>我杨了杨嘴角，却发现那杯<br/>咖啡太苦，以至于让我笑都<br/>带着这样的味道</p>	
					</div>
			</div>	
			<div class="liu3">
					<img src="img/时间.png"/>
					<div class="hua">
						<h3 class="h3_3">Open Monday-Friday</h3>
						<p>刚开始的一杯咖啡，倒掉半杯，加满水，再倒.....周而复始，最后，只会是一杯水，而不是咖啡。</p>
					</div>
			</div>	
		</div>
		<div class="frinh_2">
			<a href=""><img src="img/shousuo.png"/></a>
			<input type="text" name="" id="fi2" value=""placeholder="找到你想要的咖啡：" />
		</div>
		
	</div>
	
	<div class="jiopki">
		<div class="jiopki1">
			<img src="img/about.jpg"/>
			
		</div>
		<div class="jiopki2">
			<div class="jiopki4">
			<p>生活是咖啡</p>	
			<span>一群事业有成的校友去探望大学时的老教授。谈话很快就转换成了抱怨工作和生活中的压力。教授站起来，走进厨房。回到客厅时，教授的手里端着一大壶咖啡和各式各样的杯子，有瓷的、塑料的、玻璃的、水晶的，一些普通，一些昂贵，一些精致。教授让他的学生用这些杯子各自倒咖啡喝。
			　　生活是咖啡当所有的学生手里都端着一杯咖啡时，教授说：“如果你们留心的话，你们就会发现你们每人手里拿的都是精致的或者昂贵的杯子。对你们来说，只想要最好的东西，这是正常的，而这正是你们的问题和压力的根源。
			　　你们每一个人真正想要的是咖啡，不是杯子，但你们有意识地选择了最好的杯子，并且关注对方的杯子。
			　　现在考虑这个：生活是咖啡，金钱和社会地位是杯子，它们只是承载生活的道具，不能改变生活的质量。过于注重杯子，我们就享受不到香浓的咖啡。所以，不要让杯子驱使你，而应该享受咖啡。”</span>		
			</div>
		</div>
	</div>
	
	<div class="yuing">
		<div class="yuing_1">
			<dl>
				<dt><img src="img/点餐.png"/></dt>
				<dd class="yu_5">易于订购</dd>
				<dd>
					Even the all-powerful Pointing has no control<br /> about the blind texts it is an almost<br /> unorthographic.
				</dd>
			</dl>
			<dl>
				<dt><img src="img/快递运输.png"/></dt>
				<dd class="yu_5">易于订购</dd>
				<dd>
					Even the all-powerful Pointing has no control<br /> about the blind texts it is an almost<br /> unorthographic.
				</dd>
			</dl>
			<dl>
				<dt><img src="img/guanwang.png"/></dt>
				<dd class="yu_5">易于订购</dd>
				<dd>
					Even the all-powerful Pointing has no control<br /> about the blind texts it is an almost<br /> unorthographic.
				</dd>
			</dl>
		</div>
		
	</div>
	 <div class="kauhy">
	 	<div class="kauhy1">
	 		<div class="kauhy_3">
		 		<span class="jyio">Discover</span>
		 		<p align="right">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at
		 			 the coast of the Semantics, a lar·View Full MenuView Full Menue ocean.
		 		</p>
		 		<a href="" class="caid">查看菜单</a>
	 		</div>
	 		<div class="kauhy2">
	 		<img src="img/menu-1.jpg" class="kn_z"/>
	 		<img src="img/menu-2.jpg"  class="kn_x"/>
	 		<img src="img/menu-3.jpg"  class="kn_c"/>
	 		<img src="img/menu-4.jpg"  class="kn_v"/>	
	 	</div>
	 	</div>
	 </div>
	 
	 <div class="beidi">
		<div class="dffs">
			<dl class="dffs_1">				
				<dt><svg t="1590501452543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1252" width="64" height="64"><path d="M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272zM137.408 960l675.136 0c33.152 0 60.032-28.352 60.032-63.488L77.44 896.512C77.44 931.648 104.256 960 137.408 960zM351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856zM615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648zM491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z" p-id="1253" fill="#f4ea2a"></path></svg></dt>
				<dd>100</dd>
				<dd class="akf">ASDF</dd>
			</dl>
			<dl class="dffs_1">				
				<dt><svg t="1590501452543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1252" width="64" height="64"><path d="M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272zM137.408 960l675.136 0c33.152 0 60.032-28.352 60.032-63.488L77.44 896.512C77.44 931.648 104.256 960 137.408 960zM351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856zM615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648zM491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z" p-id="1253" fill="#f4ea2a"></path></svg></dt>
				<dd>85</dd>
				<dd class="akf">ASDF</dd>
			</dl>
			<dl class="dffs_1">				
				<dt><svg t="1590501452543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1252" width="64" height="64"><path d="M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272zM137.408 960l675.136 0c33.152 0 60.032-28.352 60.032-63.488L77.44 896.512C77.44 931.648 104.256 960 137.408 960zM351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856zM615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648zM491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z" p-id="1253" fill="#f4ea2a"></path></svg></dt>
				<dd>10,567</dd>
				<dd class="akf">ASDF</dd>
			</dl>
			<dl class="dffs_1">				
				<dt><svg t="1590501452543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1252" width="64" height="64"><path d="M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272zM137.408 960l675.136 0c33.152 0 60.032-28.352 60.032-63.488L77.44 896.512C77.44 931.648 104.256 960 137.408 960zM351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856zM615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648zM491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z" p-id="1253" fill="#f4ea2a"></path></svg></dt>
				<dd>900</dd>
				<dd class="akf">ASDF</dd>
			</dl>
		</div>
	 </div>
	 
	<div class="fjefef">
		<div class="fjej">
	 		<h2 class="mb-4">Best Coffee Sellers</h2>
	 		<p>Far far away, behind the word mountains, far from the countries Vokalia and<br /> Consonantia, there live the blind texts.</p>
		</div>
	 </div>
	 
	<div class="row">
        	<div class="row_1">
        		<div class="entry">
    					<div class="arg"></div>
    					<div class="text text-center pt-4">
    						<h3><a href="#">Coffee Capuccino</a></h3>
    						<p>A small river named Duden flows<br />  by their place and supplies</p>
    						<span>$5.90</span>
    						<p><a href="#" class="primary">Add to Cart</a></p>
    					</div>
    			</div>
        	
        	
        		<div class="entry">
    					<div class="arg1"></div>
    					<div class="text text-center pt-4">
    						<h3><a href="#">Coffee Capuccino</a></h3>
    						<p>A small river named Duden flows<br />  by their place and supplies</p>
    						<p class="price"><span>$5.90</span></p>
    						<p><a href="#" class="primary">Add to Cart</a></p>
    					</div>
    			</div>
        	
        	
        		<div class="entry">
    					<div class="arg2"></div>
    					<div class="text text-center pt-4">
    						<h3><a href="#">Coffee Capuccino</a></h3>
    						<p>A small river named Duden flows<br />  by their place and supplies</p>
    						<p class="price"><span>$5.90</span></p>
    						<p><a href="#" class="primary">Add to Cart</a></p>
    					</div>
    			</div>
        	
        	
        		<div class="entry">
    					<div class="arg3"></div>
    					<div class="text text-center pt-4">
    						<h3><a href="#">Coffee Capuccino</a></h3>
    						<p>A small river named Duden flows<br /> by their place and supplies</p>
    						<p class="price"><span>$5.90</span></p>
    						<p><a href="#" class="primary">Add to Cart</a></p>
    			</div>
    				
        	</div>
        </div>
	 </div>
	 
	<div class="jkongli">
		<div class="jkong">
			<div class="jko">
				<div class="jk1"></div>
				
				</div>
			<div class="jko1">
				<div class="jk2"></div>
				
				</div>
			<div class="jko2">
				<div class="jk3"></div>
				
				</div>
			<div class="jko3">
				<div class="jk4"></div>
				
				</div>	
		</div>	
	</div>
	  <div class="yewei">
	  	<p>这个咖啡馆不是很豪华，反而很简单，</br>与众不同的是这家咖啡馆有很多花，因为这家咖啡屋的老板很会养花啊，</br>
	  		还有如果你想呼吸空气可以在外面喝。
	  	</p>
	  	
	 	<ul>
	 		<li><a href=""><img src="img/订单评价.png"/></a></li>
	 		<li><a href=""><img src="img/粉丝.png"/></a></li>
	 		<li><a href=""><img src="img/物资申购.png"/></a></li>
	 		<li><a href=""><img src="img/我的名片.png"/></a></li>
	 	</ul>
	 </div>
	 
	</body>
</html>
